import './css/index.css';
import img1 from './img/01.jpeg';
import img2 from './img/02.jpeg';
import img3 from './img/03.jpeg';
import img4 from './img/04.jpeg';
let currentIndex = 0;
let data = [
  {
    src: img1,
  },
  {
    src: img2,
  },
  {
    src: img3,
  },
  {
    src: img4,
  },
];

const box = document.querySelector('.box');
const circles = document.querySelectorAll('.circle');
let autoPlayInterval;

function updatePhoto() {
  box.classList.add('transition');
  setTimeout(() => {
    box.style.backgroundImage = `url(${data[currentIndex].src})`;
  }, 300);

  circles.forEach((circle, index) => {
    circle.classList.toggle('active', index === currentIndex);
  });
}

circles.forEach((circle, index) => {
  circle.addEventListener('click', () => {
    currentIndex = index;
    updatePhoto();
    autoPlay();
  });
});

document.querySelector('.left').addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + data.length) % data.length;
  updatePhoto();
  autoPlay();
});

document.querySelector('.right').addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % data.length;
  updatePhoto();
  autoPlay();
});

function autoPlay() {
  clearInterval(autoPlayInterval);
  autoPlayInterval = setInterval(() => {
    currentIndex = (currentIndex + 1) % data.length;
    updatePhoto();
  }, 3000);
}

updatePhoto();
autoPlay();
